<template>
  <div class="app-container pagebox" @click="CloseSystemType">
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="4">
        <div class="bg historybox">
          <div class="infotitle">
            <span class="infotitlespan colorin">机床坐标</span>
          </div>
          <ul class="quantityOFGacility">
            <li class="flexr">
              <h5 :style="{ color: alarmStatues[0], 'margin-bottom': 0 }">X</h5>
              <p class="colorin" style="margin-bottom: 0">
                {{ MacCurrent.xPos || '' }}
                <span>毫米</span>
              </p>
              <a :style="{ 'background-color': alarmStatues[0] }"></a>
            </li>
            <li class="flexr">
              <h5 :style="{ color: alarmStatues[1], 'margin-bottom': 0 }">Y</h5>
              <p class="colorin" style="margin-bottom: 0">
                {{ MacCurrent.yPos || '' }}
                <span>毫米</span>
              </p>
              <a :style="{ 'background-color': alarmStatues[1] }"></a>
            </li>
            <li class="flexr">
              <h5 :style="{ color: alarmStatues[2], 'margin-bottom': 0 }">Z</h5>
              <p class="colorin" style="margin-bottom: 0">
                {{ MacCurrent.zPos || '' }}
                <span>毫米</span>
              </p>
              <a :style="{ 'background-color': alarmStatues[2] }"></a>
            </li>
            <li class="flexr">
              <h6>
                T
                <span class="colorin">{{ MacCurrent.currentToolNo || '0' }}</span>
              </h6>
              <h6>
                F
                <span class="colorin">{{ MacCurrent.feedRate || '0' }}</span>
              </h6>
              <h6>
                S
                <span class="colorin">{{ MacCurrent.spdlSpeed || '0' }}</span>
              </h6>
            </li>
          </ul>
        </div>
      </a-col>
       <a-col class="gutter-row" :span="4">
          <div class="bg historybox">
          <div class="infotitle">
            <span class="infotitlespan colorin">传感器</span>
          </div>
          <div style="height:378px" class="leftParamete padding-lr">
            <p>
              <span>X轴振动：</span>
              <span class="colorin">
                {{MacCurrent.xVibration||0}}
              </span>
            </p>
            <p>
              <span>Y轴振动：</span>
              <span class="colorin">
  {{MacCurrent.yVibration||0}}
              </span>
            </p>
            <p>
              <span>Z轴振动：</span>
              <span class="colorin">
  {{MacCurrent.zVibration||0}}
              </span>
            </p>
            <p>
              <span>机床主轴功率：</span>
              <span class="colorin">
                 {{MacCurrent.spdlPower||0}} W
              </span>
            </p>
            <p>
              <span>机床温度：</span>
              <span class="colorin">
                   {{MacCurrent.temperature||0}} ℃
              </span>
            </p>
          </div>
           </div>
          </a-col>
      <a-col class="gutter-row" :span="10">
        <div class="gutter-boxinfo bg">
          <div class="infotitle">
            <!-- <span class="infotitlespan">设备详情</span> -->
            <span :style="{ color: dataInfo.color }" v-if="dataInfo.color">
              <a-icon theme="filled" :style="{ color: dataInfo.color, 'margin-right': ' 2px' }" type="check-circle" />
              {{ dataInfo.runstate | runStateOptionType }}
            </span>
            <span class="colorin">{{ dataInfo.groupname }}</span>
          </div>
          <div class="infoimgbox">
            <div style="" class="infoimg">
              <img :src="dataInfo.picture ? imgurl + dataInfo.picture : defultimg" alt="" :onerror="onerrorimg" />
            </div>
            <div class="infoAlarmbox">
              <h4 class="colorin">当前报警</h4>
              <div v-if="dataInfo.runstate == 2000">
                <a-table
                  :columns="columns"
                  :data-source="ararmData"
                  size="small"
                  :scroll="{ y: 300 }"
                  :pagination="false"
                ></a-table>
              </div>

              <a-empty v-else style="margin-top: 80px" />
            </div>
          </div>
        </div>
      </a-col>
      <!--    时序图-->
      <a-col class="gutter-row" :span="6">
        <div class="gutter-boxinfo bg">
          <a-spin :spinning="spinning">
            <div class="infotitle">
              <span class="infotitlespan colorin">设备基本数据</span>
              <div style="float: right">
                <a-date-picker size="small" :default-value="moment(timeParams.day, dateFormat)" @change="datechange" />
              </div>
            </div>
            <div>
              <div style="height: 399px">
                <div style="overflow: hidden">
                  <!--              环形图-->
                  <div style="width: 50%; float: left" class="padding-tb-10">
                    <pieCharts :chartData="pieDataCharts" :running="running" :height="'240px'" />
                  </div>
                  <!--              环形图图例-->
                  <div style="width: 50%; float: left; height: 240px" class="pielegendbox padding-tb-10">
                    <p class="pielegend flexr" v-for="(item, index) in pieData" :key="index + 'a'">
                      <span class="quan" :style="{ 'border-color': alarmStatues[index] }"></span>
                      <span class="name">{{ item.name }}</span>
                      <span class="value">{{ item.value }}</span>
                    </p>
                  </div>
                </div>
                <ul style="width: 100%" class="pielegendbox padding-tb">
                  <li class="pielegend">
                    <span class="name">当日加工</span>
                    <span class="value">{{ timeObj ? (timeObj.total ? timeObj.total : 0) : 0 }}件</span>
                  </li>
                  <li class="pielegend">
                    <p class="name">工件信息</p>
                    <p style="margin-top: 5px">
                      <span class="value" v-for="(item, index) in produceNameRank" :key="index + 'b'">
                        {{ index + 1 }}. {{ item.produceName }} {{ item.count }}件
                      </span>
                      <a @click="gotoyieldDetails" style="color: #269af3">查看详情></a>
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </a-spin>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="24" style="margin-top: 20px">
        <div class="gutter-boxinfo bg">
          <a-row>
            <a-col :span="8">
              <div class="infotitle">
                <span class="infotitlespan colorin">
                  机床信息
                  <a-icon type="edit" style="color: #0eaee0; margin-left: 10px" @click="editMSG" v-if="!msgEdit" />
                  <a-icon
                    type="check"
                    style="color: #0eaee0; margin-left: 10px"
                    @click="updateArchiveAndGuide"
                    v-else
                  />
                </span>
              </div>
              <div>
                <ul class="pielegendbox pielegendboxbottom">
                  <li class="pielegend">
                    <p class="name">设备规格</p>
                    <p>
                      <span v-if="!msgEdit">{{ dataGuide.macNorm || '' }}</span>
                      <a-input v-else placeholder="设备规格" v-model="dataGuide.macNorm" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">上网设备IMEI</p>
                    <p>
                      <span v-if="!msgEdit">{{ dataGuide.macImei || '' }}</span>
                      <a-input v-else placeholder="上网设备IMEI" v-model="dataGuide.macImei" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">联网方式</p>
                    <p class="value" v-if="!msgEdit">
                      {{ dataGuide.netWorkingMode || '' }}
                    </p>
                    <a-select
                      v-else
                      :default-value="dataGuide.netWorkingMode"
                      style="width: 200px"
                      v-model="dataGuide.netWorkingMode"
                    >
                      <a-select-option :value="item" v-for="(item, index) in netTypeArray" :key="item">
                        {{ item }}
                      </a-select-option>
                    </a-select>
                  </li>
                  <li class="pielegend">
                    <p class="name">设备编号</p>
                    <p>
                      <span v-if="!msgEdit">{{ dataGuide.macNumb || '' }}</span>
                      <a-input v-else placeholder="设备编号" v-model="dataGuide.macNumb" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">设备型号</p>
                    <p>
                      <span v-if="!msgEdit">{{ dataGuide.macType || '' }}</span>
                      <a-input v-else placeholder="设备型号" v-model="dataGuide.macType" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">设备类型</p>
                    <p>
                      <span v-if="!msgEdit">{{ dataGuide.macName || '' }}</span>
                      <a-select
                        v-if="msgEdit"
                        :default-value="macName[0]"
                        @change="handleChangemacNameone"
                        style="width: 100px"
                      >
                        <a-select-option :value="item" v-for="(item, index) in equipmentTypelist" :key="item">
                          {{ item }}
                        </a-select-option>
                      </a-select>
                      <a-select
                        v-if="msgEdit"
                        v-model="macName[1]"
                        :default-value="macName[1]"
                        @change="handleChangemacNametwo"
                        style="width: 100px"
                      >
                        <a-select-option :value="item" v-for="(item, index) in equipmentType[macNameIndex]" :key="item">
                          {{ item }}
                        </a-select-option>
                      </a-select>
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">刀库类型</p>
                    <p>
                      <span v-if="!msgEdit">{{ dataGuide.toolChargeType || '' }}</span>
                      <a-select
                        v-if="msgEdit"
                        v-model="dataGuide.toolChargeType"
                        :default-value="dataGuide.netWorkingMode"
                        @change="handletoolChange"
                        style="width: 200px"
                      >
                        <a-select-option :value="item" v-for="(item, index) in array" :key="item">
                          {{ item }}
                        </a-select-option>
                      </a-select>
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">导轨类型</p>
                    <template v-if="!msgEdit">
                      <p>
                        <a
                          v-for="(toolGuide, index) in dataGuide.toolGuide"
                          :key="index + 'c'"
                          style="display: block"
                          href=""
                        >
                          <span style="display: inline-block; margin-right: 20px" class="colorin">
                            {{ toolGuide.guideAxis || '' }}
                          </span>
                          <span style="display: inline-block" class="colorin">{{ toolGuide.guideType || '' }}</span>
                        </a>
                      </p>
                    </template>

                    <template v-if="msgEdit">
                      <div style="color: #0eaee0; margin: 10px 0" @click="addtoolGuide">
                        <a-icon type="plus-circle" style="color: #0eaee0" />
                        添加导轨
                      </div>
                      <div style="margin-bottom: 10px; margin-left: 85px">
                        <div
                          v-for="(toolGuide, index) in dataGuide.toolGuide"
                          :key="index + 'v'"
                          style="position: relative; margin-bottom: 10px"
                        >
                          <a-icon
                            type="close-circle"
                            style="position: absolute; top: 7px; left: 250px; color: red"
                            @click="deteletoolGuide(index)"
                          />
                          <a-input placeholder="设备编号" v-model="toolGuide.guideAxis" style="width: 100px" />
                          <a-radio-group v-model="toolGuide.guideType" style="margin-left: 10px">
                            <a-radio :value="'线轨'" class="colorin">线轨</a-radio>
                            <a-radio :value="'硬轨'" class="colorin">硬轨</a-radio>
                          </a-radio-group>
                        </div>
                      </div>
                    </template>
                  </li>
                  <li class="pielegend">
                    <p class="name">机床图片</p>
                    <div style="overflow: hidden; margin-top: 10px">
                      <div
                        style="width: 80px; float: left; margin-right: 20px"
                        v-for="item in picturelist"
                        :key="item.name"
                      >
                        <imageupload
                          v-if="msgEdit"
                          :imagUrl="item.img ? imgurl + item.img : ''"
                          v-model="item.fileObj"
                          :type="2"
                          :width="'50px'"
                        />
                        <img
                          @click="openimg(item.img)"
                          v-else
                          :src="imgurl + item.img"
                          :onerror="onerrorpicture"
                          alt=""
                          style="width: 80px; height: 80px"
                        />
                        <p style="text-align: center; width: 100%">
                          {{ item.name }}
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="infotitle bg">
                <span class="infotitlespan colorin">
                  数控系统信息
                  <a-icon
                    type="edit"
                    style="color: #0eaee0; margin-left: 10px"
                    @click="editCncDevice"
                    v-if="!editCncDeviceedit"
                  />
                  <a-icon
                    type="check"
                    style="color: #0eaee0; margin-left: 10px"
                    @click="updateArchivesCncDevice"
                    v-else
                  />
                </span>
              </div>
              <div>
                <ul class="pielegendbox pielegendboxbottom" @click="CloseSystemType">
                  <li class="pielegend">
                    <p class="name">系统型号</p>
                    <p>
                      <span v-if="!editCncDeviceedit">{{ ArchivesCncDevice.systemType || '' }}</span>

                      <a-input
                        v-else
                        placeholder="系统型号"
                        @click.stop="openSystemType"
                        v-model="ArchivesCncDevice.systemType"
                      />
                    </p>
                    <div class="myselectbox" v-show="systemTypeShow">
                      <div class="myselect">
                        <p v-for="(type, index) in systemTypes" :key="index" @click.stop="getSystemType(type)">
                          {{ type }}
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="pielegend">
                    <p class="name">系统编号</p>
                    <p class="value">
                      <span v-if="!editCncDeviceedit">
                        {{ ArchivesCncDevice.cncNumber || '' }}
                      </span>
                      <a-input v-else placeholder="系统编号" v-model="ArchivesCncDevice.cncNumber" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">SN号</p>
                    <p>
                      <span>{{ macSN || '' }}</span>
                      <!-- <a-input
                        v-else
                        placeholder="SN号"
                        v-model="ArchivesCncDevice.macSN"
                      /> -->
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">软件版本</p>
                    <p>
                      <span v-if="!editCncDeviceedit">
                        {{ ArchivesCncDevice.softwareVersion || '' }}
                      </span>
                      <a-input v-else placeholder="软件版本" v-model="ArchivesCncDevice.softwareVersion" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">NCU</p>
                    <p>
                      <span v-if="!editCncDeviceedit">
                        {{ ArchivesCncDevice.ncu || '' }}
                      </span>
                      <a-input v-else placeholder="NCU" v-model="ArchivesCncDevice.ncu" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">LAD</p>
                    <p>
                      <span v-if="!editCncDeviceedit">{{ ArchivesCncDevice.lad || '' }}</span>
                      <a-input v-else placeholder="LAD" v-model="ArchivesCncDevice.lad" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">DRV</p>
                    <p>
                      <span v-if="!editCncDeviceedit">{{ ArchivesCncDevice.drv || '' }}</span>
                      <a-input v-else placeholder="DRV" v-model="ArchivesCncDevice.drv" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">OS</p>
                    <p>
                      <span v-if="!editCncDeviceedit">{{ ArchivesCncDevice.os || '' }}</span>
                      <a-input v-else placeholder="OS" v-model="ArchivesCncDevice.os" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">API</p>
                    <p>
                      <span v-if="!editCncDeviceedit">{{ ArchivesCncDevice.api || '' }}</span>
                      <a-input v-else placeholder="API" v-model="ArchivesCncDevice.api" />
                    </p>
                  </li>
                </ul>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="infotitle">
                <span class="infotitlespan colorin">
                  伺服与电机信息
                  <a-icon
                    type="edit"
                    style="color: #0eaee0; margin-left: 10px"
                    @click="editServoMotor"
                    v-if="!ServoMotoredit"
                  />
                  <a-icon
                    type="check"
                    style="color: #0eaee0; margin-left: 10px"
                    @click="updateArchiveServoMotor"
                    v-else
                  />
                </span>
              </div>
              <div>
                <ul
                  class="pielegendbox pielegendboxbottom"
                  v-for="(item, index) in ArchiveServoMotor"
                  :key="index + 'l'"
                >
                  <li class="pielegend">
                    <p class="value">
                      <span v-if="!ServoMotoredit">{{ item.axisType || '' }}</span>
                      <a-input style="width: 50px" v-else v-model="item.axisType" />
                    </p>
                    <p
                      class="name"
                      style="margin-left: 20px; color: red"
                      v-if="ServoMotoredit"
                      @click="deteleServoMotor(index)"
                    >
                      <a style="color: red">
                        <a-icon type="close-circle" style="margin-right: 10px" />
                        删除轴
                      </a>
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">伺服驱动编号</p>
                    <p class="value">
                      <span v-if="!ServoMotoredit">{{ item.servoNumber || '' }}</span>
                      <a-input v-else placeholder="伺服驱动编号" v-model="item.servoNumber" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">伺服驱动型号</p>
                    <p>
                      <span v-if="!ServoMotoredit">{{ item.servoType || '' }}</span>
                      <a-input v-else placeholder="伺服驱动型号" v-model="item.servoType" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">伺服驱动版本</p>
                    <p>
                      <span v-if="!ServoMotoredit">{{ item.servoVersion || '' }}</span>
                      <a-input v-else placeholder="伺服驱动版本" v-model="item.servoVersion" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">电机编号</p>
                    <p>
                      <span v-if="!ServoMotoredit">{{ item.motorNumber || '' }}</span>
                      <a-input v-else placeholder="电机编号" v-model="item.motorNumber" />
                    </p>
                  </li>
                  <li class="pielegend">
                    <p class="name">电机型号</p>
                    <p>
                      <span v-if="!ServoMotoredit">{{ item.motorType || '' }}</span>
                      <a-input v-else placeholder="电机型号" v-model="item.motorType" />
                    </p>
                  </li>
                </ul>
                <div style="color: #0eaee0; margin: 10px 0" @click="addServoMotor" v-if="ServoMotoredit">
                  <a-icon type="plus-circle" style="color: #0eaee0" />
                  添加轴
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <div class="gutter-boxinfo bg margin-tb">
      <div class="infotitle">
        <span class="infotitlespan colorin">刀具信息</span>
      </div>
      <a-table
        bordered
        class="margin-tb"
        :loading="toolLoading"
        :columns="toolColumns"
        :data-source="ToolList"
        :pagination="false"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
      ></a-table>
      <div style="padding: 20px">
        <a-pagination
          size="small"
          :total="total"
          :show-total="(total) => `一共 ${total} 条`"
          :default-page-size="10"
          @change="changepageSignIn"
        />
      </div>
    </div>

    <a-modal :visible="previewVisibleopen" :footer="null" @cancel="previewVisibleopen = false">
      <img alt="example" style="width: 100%" :src="previewimg" />
    </a-modal>
  </div>
</template>
<script>
const toolColumns = [
  {
    title: '刀具号',
    dataIndex: 'toolNo',
    scopedSlots: { customRender: 'toolNo' },
  },
  {
    title: '半径补偿',
    dataIndex: 'rad',
    scopedSlots: { customRender: 'rad' },
  },
  {
    title: '半径磨损',
    dataIndex: 'radWear',
    scopedSlots: { customRender: 'radWear' },
  },
  {
    title: '长度补偿',
    dataIndex: 'length',
    scopedSlots: { customRender: 'length' },
  },
  {
    title: '长度磨损',
    dataIndex: 'lengthWear',
    scopedSlots: { customRender: 'lengthWear' },
  },
];

const columns = [
  {
    title: '报警号',
    dataIndex: 'alarmid',
    scopedSlots: { customRender: 'alarmid' },
  },
  {
    title: '报警时间',
    dataIndex: 'uploadtime',
  },
  {
    title: '报警内容',
    dataIndex: 'alarmdata',
  },
];
let alarmStatues = ['#289EF6', '#3FC529', '#FBC225', '#E74629', '#E2E7EE'];
let systemTypes = ['HNC-808A', 'HNC-818A', 'HNC-818B', 'HNC-808D', 'HNC-818D', '宝鸡B60T', '宝鸡B80T', '宝鸡B80M'];
import pieCharts from './components/pieCharts';
import api from '@/api/deviceInfo.js';
import Eapi from '@/api/equipment';
import imageupload from '@components/upload/imageupload2.vue';
import moment from "moment";
const runStateOption = [
  {
    label: '加工',
    value: 1000,
    color: '#46C13E',
  },
  {
    label: '报警',
    value: 2000,
    color: '#F80B18',
  },
  {
    label: '待机',
    value: 3000,
    color: '#FCCD0F',
  },
  {
    label: '离线',
    value: 4000,
    color: '#B9C6BA',
  },
];
const equipmentTypelist = [
  '数控车床',
  '数控铣床',
  '加工中心',
  '五轴机床',
  '专用机床',
  '数控磨床',
  '数控镗床',
  '数控钻床',
  '普通机床',
  '机器人',
  '其他机床',
];
const equipmentType = [
  ['平身车床', '斜身车床', '立式车床', '其他车床'],
  ['标准铣床', '卧式铣床', '龙门铣床'],
  ['卧式加工中心', '立式加工中心', '龙门加工中心', '其他加工中心'],
  ['摇篮式五轴', '摆头式五轴', '混合式五轴'],
  ['专用平床身车床', '专用斜床身车床', '专用铣床', '专用卧式加工中心', '专用立式加工中心', '其他专用机床'],
  ['数控平面磨床', '数控内圆磨床', '数控外圆磨床', '其他磨床'],
  ['数控镗床'],
  ['数控钻床'],
  ['普通机床', '普通铣床'],
  ['四轴机器人', '五轴机器人', '六轴机器人'],
  ['其他机床'],
];
const list = [
  { name: '正面', value: 'positive' },
  { name: '侧面', value: 'side' },
  { name: '刀库', value: 'knife' },
  { name: '电柜', value: 'electric' },
  { name: '导轨', value: 'guide' },
];
import { timeCalculation } from '../../unit/tool2';

export default {
  name: 'index',
  filters: {
    runStateOptionType(val) {
      let opt = runStateOption.find((item) => item.value == val);
      return opt ? opt.label : '';
    },
  },
  components: {
    pieCharts,
    imageupload,
  },
  data() {
    // let moment = this.$Moment;
    return {
      toolColumns: toolColumns,
      tooldata: [{ index: '0', name: '10', operation: '100', IP: '200', Numb: '100', type: 1 }],
      toolLoading: false,
      columns: columns,
      ararmData: [],
      alarmStatues: alarmStatues,
      pieData: [
        { value: '0', name: '开机' },
        { value: '0', name: '运行' },
        { value: '0', name: '待机' },
        {
          value: '0',
          name: '报警',
        },
        { value: '0', name: '离线' },
      ],
      macSN: '',
      dataInfo: {},
      dataGuide: {},
      timeParams: {
        macSN: '',
        day: '',
      },
      moment,
      dateFormat: 'YYYY-MM-DD',
      timeObj: {},
      pieDataCharts: [],
      running: null,
      ProduceByMacSN: null,
      ArchivesCncDevice: {},
      ArchiveServoMotor: [],
      msgEdit: false,
      netTypeArray: ['4G', '窄带', '有线网', '无线网'],
      array: [
        '机械手刀库',
        '链式刀库',
        '斗笠式刀库',
        '夹臂式刀库',
        '电动刀架',
        '液压刀架',
        '排式刀架',
        '伺服刀架（车）',
      ],
      equipmentTypelist: equipmentTypelist,
      equipmentType: equipmentType,
      picturelist: list,
      systemTypes: systemTypes,
      macName: [],
      macNameIndex: 0,
      editCncDeviceedit: false,
      ServoMotoredit: false,
      imgurl: '',
      defultimg: require('@images/defaultImg.png'),
      onerrorimg: 'this.src="' + require('@images/defaultImg.png') + '"',
      onerrorpicture: 'this.src="' + require('@images/imgdefult.png') + '"',
      produceNameRank: [],
      previewVisibleopen: false,
      previewimg: '',
      groupid: null,
      spinning: false,
      systemTypeShow: false,
      MacCurrent: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      ToolList: [],
    };
  },
  created() {
    this.groupid = this.$route.query.groupid;
    this.imgurl = this.$pictureUrl;
    this.timeParams.macSN = this.macSN = this.$route.query.macsn;
    this.timeParams.day = timeCalculation(new Date(), 'subtract', 0);
    this.selectArchives();
    this.selArchiveAndGuide();
    this.getStateTimeSum();
    // this.getProduceByMacSN();
    // this.DefMonthProduceDay();
    this.getArchivesCncDevice();
    this.getArchiveServoMotor();
    this.SelMacAlarm();
    this.getMacCurrent();
    this.getToolList();
  },
  methods: {

    //传感器
    getMacCurrent(macSn) {
      Eapi.getMacCurrent({ companyId: 3, macSn: this.macSN }).then((res) => {
        if (res.MsgCode == 0) {
          this.MacCurrent = res.Data;
        }
      });
    },
    changepageSignIn(size){
this.pageNum=size;
this.getToolList()
    },
    //刀具
    getToolList() {
      Eapi.getToolList({ macSn: this.macSN, pageNum: this.pageNum, pageSize: this.pageSize }).then((res) => {
        if (res.MsgCode == 0) {
          this.ToolList = res.Data.rows;
          this.total = res.Data.total;
        }
      });
    },
    getSystemType(type) {
      console.log('type');
      console.log(type);
      this.ArchivesCncDevice.systemType = type;
      this.systemTypeShow = false;
    },
    openSystemType() {
      this.systemTypeShow = true;
    },
    CloseSystemType() {
      this.systemTypeShow = false;
    },
    gotoyieldDetails() {
      this.$router.push({ path: '/deviceInfo/yieldDetails', query: { macsn: this.macSN, groupid: this.groupid } });
    },
    openimg(img) {
      if (img) {
        this.previewimg = this.imgurl + img;
        this.previewVisibleopen = true;
      }
    },
    slnotimg(event) {
      var img = event.srcElement;
      img.src = this.defultimg;
      img.onerror = null; //解绑onerror事件
    },
    SelMacAlarm() {
      let params = {
        page: 1,
        macsn: this.macSN,
        select: '1,2,3,4',
      };
      api.SelMacAlarm(params).then((res) => {
        this.ararmData = res.Data;
      });
    },
    //修改单个机床的伺服与电机信息
    updateArchiveServoMotor() {
      let params = {
        macSN: this.macSN,
        ServoMotorInfo: JSON.stringify(this.ArchiveServoMotor),
      };
      api.updateArchiveServoMotor(params).then((res) => {
        if (res.MsgCode == 0) {
          this.$message.info(res.MsgDesc);
          this.getArchiveServoMotor();
          this.ServoMotoredit = false;
        } else {
          this.$message.error(res.MsgDesc);
        }
      });
    },
    deteleServoMotor(index) {
      this.ArchiveServoMotor.splice(index, 1);
    },
    editServoMotor() {
      this.ServoMotoredit = true;
    },
    addServoMotor() {
      this.ArchiveServoMotor.push({ axisType: '', macSN: this.macSN });
    },
    //修改系统信息
    updateArchivesCncDevice() {
      this.ArchivesCncDevice.macSn = this.timeParams.macSN;
      api.updateArchivesCncDevice(this.ArchivesCncDevice).then((res) => {
        if (res.MsgCode == 0) {
          this.$message.info(res.MsgDesc);
          this.getArchivesCncDevice();
          this.editCncDeviceedit = false;
        } else {
          this.$message.error(res.MsgDesc);
        }
      });
    },
    editCncDevice() {
      this.editCncDeviceedit = true;
    },
    //修改信息
    updateArchiveAndGuide() {
      let picture = {};
      this.picturelist.forEach((item) => {
        if (item.fileObj && item.fileObj.length > 0) {
          picture[item.value] = item.fileObj[0].id + '';
        }
      });
      if (!this.dataGuide.macType || this.dataGuide.macType == '') {
        this.$message.error('请输入设备型号');
        return;
      }
      if (!this.dataGuide.toolChargeType || this.dataGuide.toolChargeType == '') {
        this.$message.error('请选择刀库类型');
        return;
      }
      if (!this.macName || this.macName.length < 2) {
        this.$message.error('请选择设备类型');
        return;
      }
      let flag = true;
      let toolGuide = [];
      if (!this.dataGuide.toolGuide || this.dataGuide.toolGuide.length <= 0) {
        this.$message.error('请添加导轨类型');
        return;
      } else {
        this.dataGuide.toolGuide.forEach((item) => {
          let data = {
            axis: '',
            type: '',
          };
          if (!item.guideAxis || item.guideAxis == '') {
            this.$message.error('请输入导轨类型信息');
            flag = false;
            return;
          } else {
            data.axis = item.guideAxis;
            data.type = item.guideType;
            toolGuide.push(data);
          }
        });
      }
      if (!flag) {
        return;
      }

      let params = {
        macSn: this.timeParams.macSN,
        macType: this.dataGuide.macType,
        macNumb: this.dataGuide.macNumb,
        toolChargeType: this.dataGuide.toolChargeType,
        macName: this.macName[0] + '&' + this.macName[1],
        guideInfo: JSON.stringify(toolGuide),
        pictureId: JSON.stringify(picture),
        netWorkingMode: this.dataGuide.netWorkingMode,
        macNorm: this.dataGuide.macNorm,
        macImei: this.dataGuide.macImei,
      };

      api.updateArchiveAndGuide(params).then((res) => {
        if (res.MsgCode == 0) {
          this.$message.info(res.MsgDesc);
          this.selArchiveAndGuide();
          this.msgEdit = false;
          this.selectArchives();
        } else {
          this.$message.error(res.MsgDesc);
        }
      });
    },
    //导轨类型
    addtoolGuide() {
      this.dataGuide.toolGuide.push({ guideAxis: '', guideType: '线轨' });
    },
    deteletoolGuide(index) {
      this.dataGuide.toolGuide.splice(index, 1);
    },
    //设备类型
    handleChangemacNameone(item) {
      this.macNameIndex = this.equipmentTypelist.findIndex((li) => li == item);
      this.macName.splice(0, 1, this.equipmentTypelist[this.macNameIndex]);
      this.macName.splice(1, 1, this.equipmentType[this.macNameIndex][0]);
      this.$forceUpdate();
    },
    handleChangemacNametwo(item) {
      this.macName.splice(1, 1, item);
      this.$forceUpdate();
    },
    //倒库
    handletoolChange() {},
    editMSG() {
      this.msgEdit = true;
      this.$forceUpdate();
    },
    saveMSG() {
      this.msgEdit = false;
    },
    //基本信息
    selectArchives() {
      api.selectArchives({ macSN: this.macSN }).then((res) => {
        this.dataInfo = res.Data;
        this.dataInfo.color = this.runStateOptioncolor(res.Data.runstate);
      });
    },
    //机床信息
    selArchiveAndGuide() {
      api.selArchiveAndGuide({ macSn: this.macSN }).then((res) => {
        this.dataGuide = res.Data;
        let picture = res.Data.picture;
        this.picturelist.forEach((element) => {
          let item = picture.find((item) => item.description == element.value);

          if (item) {
            element.img = item.pictureUrl;
            element.id = item.id;
            element.fileObj = [{ id: '' }];
            element.fileObj[0].id = item.id;
          } else {
            element.img = '';
          }
        });

        if (this.dataGuide.macName) {
          this.macName = this.dataGuide.macName.split('&');
        }
      });
    },
    // /查询单个机床的伺服与电机信息
    getArchiveServoMotor() {
      api.getArchiveServoMotor({ macSn: this.macSN }).then((res) => {
        if (res.Data) {
          this.ArchiveServoMotor = res.Data;
        } else {
          this.ArchiveServoMotor = [];
        }
      });
    },
    //运行时间
    getStateTimeSum() {
      this.spinning = true;
      api.getStateTimeSum(this.timeParams).then((res) => {
        this.spinning = false;
        this.timeObj = res.data;
        this.pieData = [
          { value: this.timeObj ? this.timeObj.startUp : 0, name: '开机' },
          { value: this.timeObj ? this.timeObj.running : 0, name: '运行' },
          { value: this.timeObj ? this.timeObj.stop : 0, name: '待机' },
          { value: this.timeObj ? this.timeObj.alarm : 0, name: '报警' },
          { value: this.timeObj ? this.timeObj.offline : 0, name: '离线' },
        ];
        this.running = this.timeObj ? (this.timeObj.running ? this.timeObj.running : 0) : 0;
        this.pieDataCharts = res.data ? res.data.stateTimes : [];
        if (res.data && res.data.produceNameRank) {
          this.produceNameRank = res.data.produceNameRank;
        } else {
          this.produceNameRank = [];
        }
      });
    },
    //查询单个机床的数控系统信息
    getArchivesCncDevice() {
      api.getArchivesCncDevice({ macSn: this.macSN }).then((res) => {
        if (res.Data) {
          this.ArchivesCncDevice = res.Data;
        } else {
          this.ArchivesCncDevice = {};
        }
      });
    },
    //某天加工件数
    // getProduceByMacSN() {
    //   let params = {
    //     pageSize: 10,
    //     pageNum: 1,
    //     day: this.timeParams,
    //     macSN: this.macSN,
    //   };
    //   this.timeParams.pageSize = 10;
    //   this.timeParams.pageNum = 1;
    //   api.getProduceByMacSN(params).then((res) => {
    //     this.ProduceByMacSN = res.data.rows;
    //   });
    // },
    //查询时间段内机床加工件类型数量
    // DefMonthProduceDay() {
    //   let params = {
    //     startTime: this.timeParams.day,
    //     endTime: timeCalculation(this.timeParams.day, "add", 1),
    //     MacSN: this.macSN,
    //   };
    //   this.timeParams.pageSize = 10;
    //   this.timeParams.pageNum = 1;
    //   api.DefMonthProduceDay(params).then((res) => {
    //     this.ProduceByMacSN = res.Data;
    //   });
    // },
    datechange(data, datastring) {
      this.timeParams.day = datastring;
      // this.getProduceByMacSN();
      this.getStateTimeSum();
      // this.DefMonthProduceDay();
    },
    runStateOptioncolor(val) {
      let opt = runStateOption.find((item) => item.value == val);
      return opt ? opt.color : '';
    },
  },
};
</script>

<style scoped lang="less">
@import './index.less';
</style>
